
<template>
  <div class="home">
    <div class="header">
      <h1>运维配置管理中心</h1>
      <div class="stats">
        <stat-card icon="el-icon-s-data" title="服务器" :value="stats.servers" color="#67C23A"/>
        <stat-card icon="el-icon-cpu" title="网络设备" :value="stats.networks" color="#409EFF"/>
        <stat-card icon="el-icon-box" title="存储设备" :value="stats.storage" color="#E6A23C"/>
      </div>
    </div>

    <div class="quick-actions">
      <action-button
        v-for="action in actions"
        :key="action.id"
        :icon="action.icon"
        :label="action.label"
        @click="handleAction(action.id)"
      />
    </div>

    <div class="alert-panel">
      <h3>实时告警 ({{ alerts.length }})</h3>
      <alert-list :items="alerts" @detail="showAlertDetail"/>
    </div>
  </div>
</template>

<script>


export default {
  name: "index",
  data() {
    return {
      stats: {
        servers: 156,
        networks: 42,
        storage: 28
      },
      actions: [
        { id: 'discovery', icon: 'el-icon-search', label: '自动发现' },
        { id: 'audit', icon: 'el-icon-document-checked', label: '配置审计' },
        { id: 'backup', icon: 'el-icon-folder-checked', label: '配置备份' },
        { id: 'report', icon: 'el-icon-data-line', label: '生成报告' }
      ],
      alerts: [
        { id: 1, level: 'critical', message: 'SRV-002 CPU使用率95%', time: '10:23' },
        { id: 2, level: 'warning', message: 'SW-045 端口异常', time: '09:41' },
        { id: 3, level: 'warning', message: 'DB-008 连接数超限', time: '08:15' }
      ]
    }
  },
  methods: {
    handleAction(id) {
      this.$router.push(`/${id}`)
    },
    showAlertDetail(alert) {
      this.$alert(alert.message, '告警详情', {
        confirmButtonText: '确定'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    text-align: center;

    h1 {
      font-size: 28px;
      color: #303133;
      margin-bottom: 20px;
    }

    .stats {
      display: flex;
      justify-content: center;
      gap: 20px;
    }
  }

  .quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
  }

  .alert-panel {
    background: #f5f7fa;
    padding: 20px;
    border-radius: 4px;

    h3 {
      margin-bottom: 15px;
      color: #606266;
    }
  }
}
</style>
